<template>
	<view>
		<u-navbar title="消息" placeholder leftIconColor="transparent">
		</u-navbar>

		<!-- 加载状态 -->
		<view v-if="loading" class="p16">
			<u-skeleton rows="5" :loading="true"></u-skeleton>
		</view>

		<!-- 消息列表 -->
		<view v-else class="p8">
			<!-- 空状态 -->
			<view v-if="messageList.length === 0" class="empty-state">
				<u-empty text="暂无消息" mode="message"></u-empty>
			</view>

			<!-- 消息项 -->
			<view v-else class="bg-fff br-8 p8 mb-8" v-for="(item,index) in messageList" :key="item.id"
				@click="handleMessageClick(item,index)">
				<view class="flex-align px-8 py-6">
					<image :src="getMessageIcon(item.messageType)" mode="aspectFill" class="icon"></image>
					<view class="flex-1 ps-8 fw-500 fs-16 lh-2 color-5F6865">{{ getMessageTypeText(item.messageType) }}
					</view>
					<view class="fw-400 fs-12 color-999">{{ item.createTime }}</view>
					<!-- 未读标识 -->
					<view v-if="item.isRead === 0" class="unread-dot"></view>
				</view>

				<!-- 服务提醒类型消息 -->
				<block v-if="item.messageType === 1 || item.messageType === 5">
					<view class="flex bg-F8FAF9 p8 br-8 mt-8" v-if="item.item">
						<view class="fw-500 fs-14 lh-2 color-28302E">事项</view>
						<view class="fw-400 fs-14 lh-2 color-5F6865 flex-1 ps-10">{{ item.item }}</view>
					</view>
					<view class="flex bg-F8FAF9 p8 br-8 mt-8" v-if="item.time && item.messageType != 5">
						<view class="fw-500 fs-14 lh-2 color-28302E">时间</view>
						<view class="fw-400 fs-14 lh-2 color-5F6865 flex-1 ps-10">{{ item.time }}</view>
					</view>
					<view class="flex bg-F8FAF9 p8 br-8 mt-8" v-if="item.content">
						<view class="fw-400 fs-13 lh-2 color-5F6865">{{ item.content }}</view>
					</view>
				</block>

				<!-- 成功安排类型消息 -->
				<block v-else-if="item.messageType === 2">
					<view class="flex bg-F8FAF9 p8 br-8 mt-8" v-if="item.doctorName">
						<view class="fw-500 fs-14 lh-2 color-28302E">医生</view>
						<view class="fw-400 fs-14 lh-2 color-5F6865 flex-1 ps-10">{{ item.doctorName }}</view>
					</view>
					<view class="flex bg-F8FAF9 p8 br-8 mt-8" v-if="item.hospitalName">
						<view class="fw-500 fs-14 lh-2 color-28302E">医院</view>
						<view class="fw-400 fs-14 lh-2 color-5F6865 flex-1 ps-10">{{ item.hospitalName }}</view>
					</view>
					<view class="flex bg-F8FAF9 p8 br-8 mt-8" v-if="item.time">
						<view class="fw-500 fs-14 lh-2 color-28302E">时间</view>
						<view class="fw-400 fs-14 lh-2 color-5F6865 flex-1 ps-10">{{ item.time }}</view>
					</view>
					<view class="flex bg-F8FAF9 p8 br-8 mt-8" v-if="item.content">
						<view class="fw-400 fs-13 lh-2 color-5F6865">{{ item.content }}</view>
					</view>
				</block>

				<!-- 其他类型消息 -->
				<block v-else>
					<view class="fw-400 fs-14 color-5F6865 mt-8 ps-8" v-if="item.title">{{ item.title }}</view>
					<view class="flex bg-F8FAF9 p8 br-8 mt-8 lh-2" v-if="item.content">
						<view class="fw-400 fs-14 lh-2 color-5F6865">{{ item.content }}</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				messageList: [],
				loading: true,
				current_page: 1, //当前页码
				last_page: 1, //总页码
			}
		},
		onReachBottom() {
			this.getMessageList('lower');
		},
		onShow() {
			if (uni.getStorageSync('userInfo').token) {
				this.getMessageList('upper');
			} else {
				uni.navigateTo({
					url: '/pages/login'
				})
			}

			this.publicMessage();
		},
		methods: {
			// 获取消息列表
			getMessageList(type) {
				// 判断上拉还是下拉
				if (type === 'upper') {
					this.current_page = 1;
				} else if (type === 'lower') {
					if (this.current_page >= this.last_page) {
						return console.log('真没有了~~');
					} else {
						this.current_page += 1;
					}
				}
				this.$api.get({
					url: '/companion/message/list',
					data: {
						pageNum: this.current_page,
						pageSize: 10
					},
					success: res => {
						console.log('消息列表', res);
						this.loading = false;
						if (type === 'lower') {
							this.messageList = this.messageList.concat(res.list);
						} else {
							this.messageList = res.list;
						}
						if (this.messageList.length) {
							this.kong = false;
						} else {
							this.kong = true;
						}
						this.last_page = res.pages; //总页码
					}
				});
			},
			// 处理消息点击
			handleMessageClick(item, index) {
				this.$api.get({
					url: `/companion/message/markRead/${item.id}`,
					success: (res) => {
						console.log(res);
						this.messageList[index].isRead = 1;
						this.publicMessage();
					}
				});
				// 可以在这里添加跳转到消息详情页的逻辑
				// uni.navigateTo({
				//     url: `/pages/message/detail?id=${item.id}`
				// });
			},

			// 标记消息为已读
			markAsRead(messageId, item) {
				this.$api.get({
					url: `/companion/message/markRead/${messageId}`,
					success: (res) => {
						if (item) {
							item.isRead = 1;
						}
					},
					fail: (err) => {
						let errorMsg = '标记已读失败';
						if (err.data && err.data.msg) {
							errorMsg = err.data.msg;
						} else if (err.msg) {
							errorMsg = err.msg;
						}

						// 可以选择是否显示错误提示
						// uni.showToast({
						//     title: errorMsg,
						//     icon: 'none'
						// });
					}
				});
			},

			// 获取消息类型文本
			getMessageTypeText(messageType) {
				const typeMap = {
					4: '服务提醒',
					5: '随访',
					6: '评价提醒'
				};
				return typeMap[messageType] || '系统消息';
			},

			// 获取消息图标
			getMessageIcon(messageType) {
				const iconMap = {
					1: '/static/image/fwtx-iocn.png',
					2: '/static/image/dztx-icon.png',
					3: '/static/image/dztx-icon.png',
					4: '/static/image/fwtx-iocn.png',
					5: '/static/image/fwtx-iocn.png'
				};
				return iconMap[messageType] || '/static/image/fwtx-iocn.png';
			},

			// 格式化时间
			formatTime(timeStr) {
				if (!timeStr) return '';

				const date = new Date(timeStr);
				const now = new Date();
				const diff = now.getTime() - date.getTime();

				// 一天内显示时分
				if (diff < 24 * 60 * 60 * 1000) {
					const hours = String(date.getHours()).padStart(2, '0');
					const minutes = String(date.getMinutes()).padStart(2, '0');
					return `${hours}:${minutes}`;
				}

				// 一年内显示月日
				if (date.getFullYear() === now.getFullYear()) {
					const month = date.getMonth() + 1;
					const day = date.getDate();
					return `${month}-${day}`;
				}

				// 超过一年显示年月日
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const day = date.getDate();
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}

	.icon {
		width: 48rpx;
		height: 48rpx;
	}

	.bg-F8FAF9 {
		background-color: #F8FAF9;
	}

	.empty-state {
		padding: 100rpx 0;
		text-align: center;
	}

	.unread-dot {
		width: 16rpx;
		height: 16rpx;
		background-color: #FF4D4F;
		border-radius: 50%;
		margin-left: 8rpx;
	}

	.color-24C98F {
		color: #24C98F !important;
	}

	.color-28302E {
		color: #28302E !important;
	}

	.color-5F6865 {
		color: #5F6865 !important;
	}

	.color-999 {
		color: #999 !important;
	}
</style>